<template>
    <div class="store-wtext positionR" :class="{'three-line-ellepsis':!showAllText}">
        {{linesEllipsis.content}}
        <img v-if="getChartLength(linesEllipsis.content).chartLength > 140 && !linesEllipsis.img" @click="showAllText=!showAllText" class="more-text" src="../../../assets/images/prizeTopic/open_icon.png" alt="">
        <img v-else-if="getChartLength(linesEllipsis.content).chartLength > 140" @click="showAllText=!showAllText" class="more-text" src="../../../assets/images/prizeTopic/open_icon.png" alt="">
    </div>
</template>

<script>
    export default {
        name: "LinesEllipsis",
        props:{
            linesEllipsisProp:Object,
        },
        data(){
            return{
                showAllText:false,
                linesEllipsis:{
                    line:1,
                    content:'',
                    words:24,
                    img:'',
                }
            }
        },
        mounted(){
            this.linesEllipsis = Object.assign({},this.linesEllipsis,this.linesEllipsisProp);
        }
    }
</script>

<style scoped>
    .store-wtext{
        padding-top: .08rem;
        color: #999;
        font-size: .14rem;
    }
    .more-text{
        width: .135rem;
        position: absolute;
        right: 0;
        bottom: 0;
    }
</style>